<template>
  <div class="brand-user-manage">
    <div class="header-form card-filter-box">
      <el-input v-model.trim="queryForm.content" class="search-title" size="small" placeholder="请输入内容" @keyup.enter.native="queryClick"/>
      <div class="query-button" style="margin-left:20px;">
        <el-button class="search-btn-style" type="primary" size="small" plain @click="queryClick">查询</el-button>
        <el-button class="clear-btn-style" type="text" size="small" @click="queryEmpty">
          清空
          <img :src="clearIcon" class="clear-icon" alt="clear">
        </el-button>
      </div>
    </div>
    <div class="table-list">
      <el-row>
        <el-col :span="16">
          <Title :title="'用户设置'" style="margin: 7px 0 17px 0"/>
        </el-col>
        <el-table
          v-loading="listLoading"
          v-if="list.items.length > 0"
          :data="list.items"
          element-loading-text="加载中..."
          empty-text="暂无数据"
          header-cell-class-name="order-data-header-cell"
          fit
          hightlight-current-row>
          <el-table-column align="left" label="头像" width="80">
            <template slot-scope="scope">
              <div class="avatar-box">
                <img :src="scope.row.avatar || defaultAvatar" alt="头像" class="avatar">
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="工号" width="70">
            <template slot-scope="scope">
              {{ scope.row.jobNumber }}
            </template>
          </el-table-column>
          <el-table-column align="left" label="姓名">
            <template slot-scope="scope">
              {{ scope.row.name || '--' }}
            </template>
          </el-table-column>
          <el-table-column align="left" label="邮箱" min-width="100">
            <template slot-scope="scope">
              {{ scope.row.email || '--' }}
            </template>
          </el-table-column>
          <el-table-column align="left" label="部门" min-width="100">
            <template slot-scope="scope">
              {{ scope.row.department || '--' }}
            </template>
          </el-table-column>
          <el-table-column align="left" label="矩阵" min-width="100">
            <template slot-scope="scope">
              <div v-if="scope.row.subDepartment && scope.row.subDepartment.length > 0">
                <div v-for="(item, index) in scope.row.subDepartment" :key="index" class="sub-dept">
                  {{ item.name || '--' }}
                </div>
              </div>
              <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="账号" min-width="90" class="accout">
            <template slot-scope="scope">
              <el-tooltip v-if="scope.row.accountList && scope.row.accountList.length > 0" :hide-after="3000" class="item" effect="dark" placement="top">
                <div v-for="item in scope.row.accountList" slot="content" :key="item.id" style="margin-bottom: 5px">
                  {{ item.name + appendOrganization(scope.row.accountNamePlatform, scope.row.accountNameOrganization) }}
                </div>
                <div class="account-name">
                  {{ scope.row.accountList && scope.row.accountList.length ?
                    scope.row.accountList[0].name + appendOrganization(scope.row.accountNamePlatform, scope.row.accountNameOrganization)
                  : '--' }}
                </div>
              </el-tooltip>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="最后登录时间" min-width="155">
            <template slot-scope="scope">
              <span v-if="scope.row.lastLoginDate">{{ scope.row.lastLoginDate | standardFormat('YYYY/MM/DD HH:mm') }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="创建时间" min-width="155">
            <template slot-scope="scope">
              {{ scope.row.createDate | standardFormat('YYYY/MM/DD HH:mm') }}
            </template>
          </el-table-column>
          <el-table-column align="left" label="权限设置">
            <template slot-scope="scope">
              <el-button :disabled="!isBrandAdmin && !hasRouteAuth('brand:account:edit')" class="brand-user-disabled" type="text" size="small" @click="toEdit(scope)">编辑</el-button>
            </template>
          </el-table-column>
          <el-table-column align="left" label="操作" width="60" fixed="right">
            <template slot-scope="scope">
              <el-button :disabled="userInfo.jobNumber !== scope.row.jobNumber" type="text" size="small" class="brand-user-disabled" @click="toUpdate(scope)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <empty-placeholder v-else style="margin-bottom: 24px" />
      </el-row>
      <el-row type="flex" justify="end" class="pagination-area">
        <el-pagination
          v-show="list.total > 0"
          :current-page="list.page"
          :page-size="list.perPage"
          :total="list.total"
          :page-sizes="[20, 50, 100, 250, 500]"
          layout="total, prev, pager, next, sizes, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </el-row>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import { getList } from '@/api/brand';
import GetList from '@/mixins/getList';
import Empty from '@/mixins/empty';
import { isBrandNormal, isBrandAdmin, hasRouteAuth } from '@/utils/permission';
import { standardFormat } from '@/filters/date';
import defaultAvatar from '@/assets/user-avatar.png';
import clearIcon from '@/assets/medium/clear.png';
import Title from '@/components/Title';
import { appendOrganization } from '@/utils/string';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
export default {
  filters: {
    standardFormat
  },
  components: { Title, EmptyPlaceholder },
  mixins: [GetList, Empty],
  data() {
    return {
      clearIcon,
      defaultAvatar,
      queryForm: {
        content: ''
      },
      queryData: {
        content: ''
      },
      page: 1
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo
    }),
    isBrandAdmin
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === 'userUpdate' || from.name === 'editRole') {
      to.meta.isChange = true;
    } else {
      to.meta.isChange = false;
    }
    next();
  },
  activated() {
    if (!this.$route.meta.isChange) {
      this.queryForm = {};
      this.queryData = {};
      this.changeList(true);
    } else {
      if (this.list && this.list.items && this.list.items.length === 0) {
        this.changeList(true);
      } else {
        this.changeList();
      }
    }
  },
  methods: {
    appendOrganization,
    getList,
    hasRouteAuth,
    changeList(reset = false) {
      if (reset) this.page = 1;
      this.fetchData(this.page).then(() => {
        const userInfoCodeArr = this.userInfo.code.map(i => i.name);
        this.list.items.forEach(item => {
          if (isBrandNormal()) {
            if (this.userInfo.code && this.userInfo.code.length) {
              for (let j = 0; j < item.subDepartment.length; j++) {
                if (userInfoCodeArr.includes(item.subDepartment[j].name)) {
                  item.isHead = true; // 为true则表示该用户为负责人
                  return true;
                } else {
                  item.isHead = false;
                }
              }
            } else {
              item.isHead = false;
            }
          }
        });
      });
    },
    queryClick() {
      if (this.queryForm.content) {
        this.queryData.content = encodeURIComponent(this.queryForm.content);
      } else {
        this.queryData = {};
      }
      this.changeList(true);
    },
    handleSizeChange(val) {
      this.list.perPage = val;
      this.changeList(true);
    },
    handleCurrentChange(page) {
      this.page = page;
      this.changeList();
    },
    toEdit(scope) {
      const isHead = scope.row.isHead ? 1 : 0;
      this.$router.push({
        name: 'editRole',
        params: { roleId: scope.row.id },
        query: { isHead: isHead }
      });
    },
    toUpdate(scope) {
      this.$router.push({
        name: 'userUpdate',
        params: { userId: scope.row.id }
      });
    }
  }
};
</script>
<style lang="scss">
.brand-user-manage {
  .header-form {
    position: relative;
    display: flex;
    padding-bottom: 24px;
    .search-title {
      width: 240px;
    }
    .query-button {
      padding-top: 0;
    }
  }
  .table-list {
    margin: 0px 20px 20px 20px;
    // border:1px solid #eee;
    box-shadow:2px 4px 13px 0px rgba(221,225,234,1);
    border-radius:12px;
    background-color: #fff;
    padding: 17px 24px 24px 24px;
    .el-row {
      padding: 0;
      .el-table {
        font-size: 14px;
        .brand-user-disabled.is-disabled {
          color: #C0C4CC;
        }
        .account-name {
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        .avatar-box {
          width: 50px;
          height: 50px;
          // line-height: 50px;
          .avatar {
            width: 100%;
            height: 100%;
            border-radius: 100%;
            object-fit: cover;
          }
        }
      }
    }
  }
}
</style>
